/*
 * @Description: 功能按钮
 * @Author: Zzt
 * @Date: 2022-11-03 13:39:03
 * @LastEditTime: 2023-01-13 16:45:48
 */

import { Button } from 'antd';
import classNames from 'classnames/bind';
import { useMemo, useState } from 'react';
import { useMappingRelationContext } from '../contexts/MappingRelationContext';
import { useMappingRouterTypeContext } from '../contexts/MappingRouterTypeContext';
import styles from '../styles/sidebar.module.scss';
import AddMappingList from './dialogs/AddMappingList';

const cx = classNames.bind(styles);
const Operate = () => {
  const { selectItems, delTAT, calssFilter } = useMappingRelationContext();
  const [addTATVisible, setAddTATVisible] = useState(false);
  const { classification } = useMappingRouterTypeContext();
  return (
    <div className={cx('box-title')}>
      <b>{calssFilter(classification)}与档案类型的映射</b>
      <Button className={cx('title-right')} onClick={() => setAddTATVisible(true)}>
        新建映射
      </Button>
      <Button className={cx('title-right')} onClick={() => delTAT(selectItems)}>
        删除
      </Button>
      {useMemo(
        () => (
          <AddMappingList
            visible={addTATVisible}
            onClose={() => {
              setAddTATVisible(false);
            }}
          />
        ),
        [addTATVisible]
      )}
    </div>
  );
};
export default Operate;
